<template>
  <div class="container">
    <el-card>
      <div class="title">试题录入</div>
      <hr />
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="学科:" style="margin-top: 25px" prop="subjectID">
          <el-select
            v-model="form.subjectID"
            placeholder="请选择"
            style="width: 30%"
            @change="subChange"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in subjectList"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录:" prop="catalogID">
          <el-select
            v-model="form.catalogID"
            placeholder="请选择"
            style="width: 30%"
            @change="cataChange"
          >
            <el-option
              :label="item.directoryName"
              :value="item.id"
              v-for="item in directoryList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select
            v-model="form.enterpriseID"
            placeholder="请选择"
            style="width: 30%"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in companyList"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市:" prop="province">
          <el-select
            v-model="form.province"
            placeholder="请选择"
            style="width: 15%"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in provinces"
              :key="index"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.city"
            placeholder="请选择"
            style="width: 15%"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in cityArr"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向:" prop="direction">
          <el-select
            v-model="form.direction"
            placeholder="请选择"
            style="width: 30%"
          >
            <el-option
              :label="item"
              :value="item"
              v-for="item in direction"
              :key="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:" prop="questionType">
          <el-radio-group v-model="form.questionType" @change="radioChange">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="form.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干:" style="height: 300px" prop="question">
          <quill-editor
            v-model="form.question"
            style="height: 200px"
          ></quill-editor>
        </el-form-item>
        <!-- 单选 -->
        <div>
          <el-form-item label="选项:" v-if="form.questionType === '1'">
            <div class="opt" v-for="(item, index) in form.options" :key="index">
              <el-radio
                v-model="item.isRight"
                :label="1"
                style="padding-top: 10px"
                @change="radioChanges(index)"
                >{{ item.code }}:</el-radio
              >
              <el-input
                v-model="item.title"
                placeholder="请输入内容"
                style="width: 300px"
              ></el-input>
              <uploadImg :imageUrl.sync="item.img"> </uploadImg>
            </div>
            <el-button type="danger" disabled>+增加选项与答案</el-button>
          </el-form-item>
          <!-- 点击多选切换复选框 -->
          <el-form-item label="选项:" v-if="form.questionType === '2'">
            <div class="opt" v-for="(item, index) in form.options" :key="index">
              <el-checkbox-group v-model="item.isRight">
                <el-checkbox :true-label="1" :false-label="0"
                  >{{ item.code }}:</el-checkbox
                >
              </el-checkbox-group>
              <el-input
                v-model="item.title"
                placeholder="请输入内容"
                style="width: 300px; margin-left: 30px"
              ></el-input>
              <uploadImg :imageUrl.sync="item.img"> </uploadImg>
            </div>
            <el-button type="danger" @click="addOptions"
              >+增加选项与答案</el-button
            >
          </el-form-item>
        </div>
        <el-form-item label="解析视频:">
          <el-input v-model="form.videoURL" style="width: 30%"></el-input>
        </el-form-item>
        <el-form-item label="答案解析:" style="height: 300px" prop="answer">
          <quill-editor
            v-model="form.answer"
            style="height: 200px"
          ></quill-editor>
        </el-form-item>
        <el-form-item label="题目备注:">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.remarks"
            style="width: 40%"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="试题标签:">
          <el-select
            v-model="form.tags"
            placeholder="请选择试题标签"
            multiple
            style="width: 40%"
          >
            <el-option
              :label="item.label"
              :value="item.label"
              v-for="item in tagsList"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" v-show="!showBtn"
            >确认提交</el-button
          >
          <el-button type="success" @click="onUpdate" v-show="showBtn"
            >确认修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/directorys.js'
import { simple as simple1 } from '@/api/hmmm/companys.js'
import { direction } from '@/api/hmmm/constants.js'
import { add, detail, update } from '@/api/hmmm/questions.js'
import { simple as simple3 } from '@/api/hmmm/tags.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import uploadImg from '@/components/uploadImg'
import { mapState } from 'vuex'
export default {
  components: {
    uploadImg
  },
  data () {
    return {
      tags: [],
      direction: direction,
      ASCII: 68,
      provinces: provinces(),
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        direction: '',
        province: '',
        city: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        options: [
          {
            code: 'A',
            title: '',
            img: '',
            isRight: 0
          },
          {
            code: 'B',
            title: '',
            img: '',
            isRight: 0
          },
          {
            code: 'C',
            title: '',
            img: '',
            isRight: 0
          },
          {
            code: 'D',
            title: '',
            img: '',
            isRight: 0
          }
        ],
        answer: '',
        videoURL: '',
        remarks: '',
        tags: ''
      },
      subjectList: [],
      directoryList: [],
      companyList: [],
      tagsList: [],
      rules: {
        subjectID: [
          {
            required: true,
            message: '请选择学科',
            trigger: 'change'
          }
        ],
        catalogID: [
          {
            required: true,
            message: '请选择目录',
            trigger: 'change'
          }
        ],
        enterpriseID: [
          {
            required: true,
            message: '请选择企业',
            trigger: 'change'
          }
        ],
        direction: [
          {
            required: true,
            message: '请选择方向',
            trigger: 'change'
          }
        ],
        province: [
          {
            required: true,
            message: '请选择城市',
            trigger: 'change'
          }
        ],
        questionType: [
          {
            required: true,
            message: '请选择题型',
            trigger: 'change'
          }
        ],
        difficulty: [
          {
            required: true,
            message: '请选择难度',
            trigger: 'change'
          }
        ],
        question: [
          {
            required: true,
            message: '请选择题干',
            trigger: 'blur'
          }
        ],
        answer: [
          {
            required: true,
            message: '请选择答案解析',
            trigger: 'blur'
          }
        ]
      },
      show: true
    }
  },
  computed: {
    ...mapState('route', ['newID', 'listID']),
    cityArr () {
      return citys(this.form.province)
    },
    showBtn () {
      if (this.newID) {
        return true
      } else if (this.listID) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    async subChange () {
      // 获取学科之后获取目录
      this.form.catalogID = ''
      const res = await list({ subjectID: this.form.subjectID })
      this.directoryList = res.data.items
    },
    async cataChange () {
      // 获取学科,目录后获取标签
      this.form.tags = ''
      const res = await simple3({
        subjectID: this.form.subjectID,
        catalogID: this.form.catalogID
      })
      this.tagsList = res.data
    },
    onSubmit () {
      this.$refs.form.validate(async valid => {
        if (!valid) {
          return this.$message.error('添加失败')
        }
        this.form.tags = this.form.tags.join(',')
        await add(this.form)
        this.$message.success('添加成功')
        this.form = {
          subjectID: '',
          catalogID: '',
          enterpriseID: '',
          direction: '',
          province: '',
          city: '',
          questionType: '1',
          difficulty: '1',
          question: '',
          options: [
            {
              code: 'A',
              title: '',
              img: '',
              isRight: 0
            },
            {
              code: 'B',
              title: '',
              img: '',
              isRight: 0
            },
            {
              code: 'C',
              title: '',
              img: '',
              isRight: 0
            },
            {
              code: 'D',
              title: '',
              img: '',
              isRight: 0
            }
          ],
          answer: '',
          videoURL: '',
          remarks: '',
          tags: ''
        }
        this.$refs.form.resetFields()
      })
    },

    // async onSubmit () {
    //   this.form.tags = this.form.tags.join(',')
    //   await add(this.form)
    //   this.$message.success('添加成功')
    //   this.form = {
    //     subjectID: '',
    //     catalogID: '',
    //     enterpriseID: '',
    //     direction: '',
    //     province: '',
    //     city: '',
    //     questionType: '1',
    //     difficulty: '1',
    //     question: '',
    //     options: [
    //       {
    //         code: 'A',
    //         title: '',
    //         img: '',
    //         isRight: 0
    //       },
    //       {
    //         code: 'B',
    //         title: '',
    //         img: '',
    //         isRight: 0
    //       },
    //       {
    //         code: 'C',
    //         title: '',
    //         img: '',
    //         isRight: 0
    //       },
    //       {
    //         code: 'D',
    //         title: '',
    //         img: '',
    //         isRight: 0
    //       }
    //     ],
    //     answer: '',
    //     videoURL: '',
    //     remarks: '',
    //     tags: ''
    //   }
    //   this.$refs.form.resetFields()
    // },
    async onUpdate () {
      await update(this.form)
      this.$message.success('修改成功')
      this.$router.push('/list')
    },
    async getSubjectList () {
      // 获取学科
      const res = await simple()
      this.subjectList = res.data
    },
    async getCompanysList () {
      // 获取企业
      const res = await simple1()
      this.companyList = res.data
    },
    radioChange () {
      // 控制题型显示隐藏
      if (this.form.questionType === '2') {
        this.form.options.forEach(item => (item.isRight = 0))
        this.show = false
      } else if (this.form.questionType === '3') {
        this.flag = false
      } else {
        this.form.options.forEach(item => (item.isRight = 0))
        this.show = true
      }
    },
    addOptions () {
      // 添加选项
      if (this.ASCII <= 127) {
        this.ASCII++
        this.form.options.push({
          code: String.fromCharCode(this.ASCII),
          title: '',
          img: '',
          isRight: 0
        })
      }
    },
    radioChanges (index) {
      // 控制单选状态
      this.form.options.forEach(item => (item.isRight = 0))
      this.form.options[index].isRight = 1
    },
    async getIdList () {
      // 根据ID展示数据
      if (this.newID) {
        const res = await detail({ id: Number(this.newID) })
        this.form = res.data
        this.form.options = res.data.options.sort(function (a, b) {
          return a.code.charCodeAt() - b.code.charCodeAt()
        })
        if (res.data.tags !== '') {
          this.form.tags = res.data.tags.split(',')
        }
      }
      if (this.listID) {
        const res = await detail({ id: Number(this.listID) })
        this.form = res.data
        this.form.options = res.data.options.sort(function (a, b) {
          return a.code.charCodeAt() - b.code.charCodeAt()
        })
        if (res.data.tags !== '') {
          this.form.tags = res.data.tags.split(',')
        }
      }
    }
  },
  created () {
    this.getIdList()
    this.getSubjectList()
    this.getCompanysList()
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
  .title {
    margin-bottom: 20px;
  }
  .opt {
    height: 80px;
    .el-checkbox-group {
      display: inline-block;
    }
    .uploadcon {
      position: absolute;
      padding: 10px 0 10px 20px;
      border: 1px dashed gray;
      border-radius: 7px;
      margin-left: 20px;
      margin-top: -10px;
      &:hover {
        border: 1px dashed blue;
        cursor: pointer;
      }
      .el-icon-circle-close {
        position: relative;
        top: -25px;
        right: -7px;
        font-size: 18px;
      }
    }
  }
}
</style>
